<template>
  <div class="map-view">
    <div 
    :style="{ zoom: zoom }"
    id="japan_map" 
    class="map-view-data-view"></div>
    <div class="map1"></div>
    <div class="map2"></div>
    <div class="map3"></div>
  </div>
</template>

<script>
  import lvliang from './lvliang.json'
  import {mapInfo} from './mapConfig'
  import "echarts-gl"

  export default {
    name: "",
    components: {},
    data() {
      return {
        tunnelId: 5,
        zoom: 1,
        mapW: window.innerWidth,
        mapH: window.innerHeight,
        myChart: null
      };
    },
    created() {
      const _this = this;
      _this.zoom = 1 / _this.pxzoom().zoom;;
    },
    mounted() {
      this.$nextTick(() => {
        this.initEchartMap();
      });
    },
    methods: {
      initEchartMap() {
        let mapDiv = document.getElementById("japan_map");
        this.myChart = this.$echarts.init(mapDiv);
        this.$echarts.registerMap("lvliang", lvliang);
        this.setEchartOption();
      },
      // 随机色
      randomColor(){
        return '#'+Math.floor(Math.random()*16777215).toString(16);
      },
      setEchartOption() {
        let markList = [
          {

            "name": "东山隧道",
            "value": [111.103225,36.975086],
            id:5,
            itemStyle: {
              color: this.randomColor(),
            }
          },
          {
            "name": "核桃岩隧道",
            "value": [
            111.394985,37.029374
            ],
            id:1,
            itemStyle: {
              color: this.randomColor(),
            },
          },
          {
            "name": "火台山隧道",
            "value": [
            111.249569,36.993465
            ],
            id:3,
            itemStyle: {
              color: this.randomColor(),
            },
          },
          {
            "name": "交口隧道",
            "value": [
            111.174848,36.952966
            ],
            id:4,
            itemStyle: {
              color: this.randomColor(),
            },
          },
          {
            "name": "罗村隧道",
            "value": [
            110.997379,36.99525
            ],
            id:6,
            itemStyle: {
              color: this.randomColor(),
            },
          }, {
            "name": "范火泉隧道",
            "value": [
            111.301127,37.025984
            ],
            id:2,
            itemStyle: {
              color: this.randomColor(),
            },
          },
        ];
        const options = mapInfo
        options.series[0].data = JSON.parse(JSON.stringify(markList))
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
        this.myChart.setOption(options);
        this.myChart.on('click', 'series.scatter3D', (params) => {
          if(params.data.id != this.tunnelId){
            this.tunnelId = params.data.id 
            this.$emit("onTunnelIdEvent",this.tunnelId)
          }
        });
      },
    }
  }
</script>

<style scoped>
  .map-view {
    box-sizing: border-box;
    position: absolute;
    width: 56%;
    height: 100vh;
    background: transparent;
    left:22%;
    z-index: 0;
  }

  .map-view-data-view {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    z-index: 3;

  }

  .map1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36rem;
    height: 36rem;
    border: 5px dashed rgba(30, 80, 185, 0.7);
    animation: rotate 10s linear infinite;
    border-radius: 50%;
    opacity: 0.3;
    z-index: 0;
  }

  .map2 {
    position: absolute;
    width: 45rem;
    height: 45rem;
    border: 3px dashed rgba(30, 80, 185, 0.5);
    border-radius: 50%;
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 1;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .map3 {
    width: 29rem;
    height: 29rem;
    border: 40px solid rgba(30, 80, 185, 0.6);
    border-radius: 50%;
    animation: rotate1 8s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    color: #000;
    z-index: 2;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
</style>
